<template>
  <div class="page-container">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      :inline="true"
      label-width="100px"
      class="custom-form">
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item prop="phone" label="手机号码：">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="密码：" prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              oninput="this.value=this.value.replace(/\s+/g,'')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="确认密码：" prop="checkPass">
            <el-input
              v-model="ruleForm.checkPass"
              type="password"
              oninput="this.value=this.value.replace(/\s+/g,'')" />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item prop="email" label="邮箱：">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-for="(item, index) in ruleForm.addList" :key="item.key" :md="12" :sm="24">
          <el-form-item
            :label="'新增' + (index + 1) + '：'"
            :prop="'addList.' + index + '.value'"
            :rules="{ required: true, message: '不能为空', trigger: 'blur' }">
            <div class="options">
              <el-input v-model="item.value"></el-input>
              <el-button class="del" @click.prevent="removeDomain(item, index)">删除</el-button>
              <el-checkbox v-model="item.checked">同步正确选项</el-checkbox>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="addDomain">新增填写框</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { checkTel, checkEmail } from '@/utils/validate';
export default {
  name: 'DynamicForm', // 动态增减表单项
  data() {
    const validatePass = (rule, value, callback) => {
      if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        phone: '',
        password: '',
        checkPass: '',
        email: '',
        addList: [
          { value: '', checked: false },
          { value: '', checked: false },
        ],
      },
      rules: {
        phone: [
          checkTel,
          { required: true, message: '请输入手机号码', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        checkPass: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        email: [
          checkEmail,
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        addList: [
          { required: true, message: '请输入选项', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    removeDomain(item, index) {
      if (this.ruleForm.addList.length === 1) return this.$message.error('至少有一个填写框');
      this.$confirm('删除', `确认删除吗`, () => {
        this.ruleForm.addList.splice(index, 1);
      });
    },
    addDomain() {
      this.ruleForm.addList.push(
        {
          key: Date.now(),
          value: '',
          checked: false
        }
      );
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm, 'submit!');
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
};
</script>

<style scoped lang="scss">
.options {
  display: flex;
  align-items: center;
  .del {
    margin: 0 10px;
  }
}
</style>
